import React from 'react';
import {Card, Col, Row} from "antd";

import './CommonFunction.less';
import SimpleDropdown from "../../../../components/simple-table1/SimpleDropdown";

export default class CommonFunction extends React.Component {

  static defaultProps = {
    numb: 0,
    row1: [
      {
        img: require("./img/1.png"), text: '评委抽取', num: 1,
        dropdownMenu1: {
          key: 'dropdownMenu',
          items: [{key: '15', titile: "15"},
            {key: '25', titile: "25"},
            {key: '35', titile: "35"},]
        }
      },
      {img: require("./img/3.png"), text: '评委抽取', num: 2,
        dropdownMenu: {
          key: 'dropdownMenu4',
          items: [{key: '15', titile: "a"},
            {key: '25', titile: "b"},
            {key: '35', titile: "c"},]
        }},
    ],
    row2: [
      {img: require("./img/2.png"), text: '评委抽取', num: 3,
        dropdownMenu: {
          key: 'dropdownMenu4',
          items: [{key: '15', titile: "1"},
            {key: '25', titile: "2"},
            {key: '35', titile: "3"},]
        }},
      {img: require("./img/4.png"), text: '评委抽取', num: 4,
        dropdownMenu: {
          key: 'dropdownMenu4',
          items: [{key: '15', titile: "z"},
            {key: '25', titile: "x"},
            {key: '35', titile: "c"},]
        }},
    ],
  }

  _renderRow = (row) => {
    return row.map((item, index) => {
      return (
        <SimpleDropdown
          dropdownMenu={item.dropdownMenu}
          onFinishSelect={(select) => {
            this.props.onItemClick && this.props.onItemClick(select);
          }}
        >
          <div className={`flex flex-box flex-center common-function-item common-function-item-background-${item.num}`}>
            <div>
              <img className="common-function-image" src={item.img}/>
            </div>
            <span>{item.text}</span>
          </div>
        </SimpleDropdown>
      )
    })
  }

  render() {
    const {row1, row2} = this.props;
    return (
      <Card className="common-function-container flex" title="常用功能">
        <Row type="flex" justify="center" align="top" gutter={16}>
          {this._renderRow(row1)}
        </Row>
        <Row type="flex" justify="center" align="top" gutter={16}>
          {this._renderRow(row2)}
        </Row>

      </Card>
    )
  }
}



